useMemo

React를 사용하다 보면 컴포넌트가 자주 렌더링되면서 성능 문제가 발생할 수 있습니다. 이를 최적화하기 위해 useMemo 훅을 사용합니다. useMemo는 특정 값이나 계산을 메모이제이션(memoization)하여 불필요한 재계산을 방지합니다. 이 글에서는 useMemo의 사용법과 주의사항을 코드 예시와 함께 알아보겠습니다.

useMemo 소개

useMemo는 React 훅 중 하나로, 함수형 컴포넌트 내에서 값을 메모이제이션하여 불필요한 계산을 방지합니다. 이는 성능을 최적화하는 데 유용합니다.

사용법

import React, { useMemo } from 'react';

const ExpensiveComponent = ({ number }) => {
  const expensiveCalculation = (num) => {
    console.log('Expensive calculation running...');
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += num;
    }
    return result;
  };

  const memoizedValue = useMemo(() => expensiveCalculation(number), [number]);

  return (
    <div>
      <h1>Result: {memoizedValue}</h1>
    </div>
  );
};

export default ExpensiveComponent;

위 코드에서 useMemo는 number가 변경될 때만 expensiveCalculation 함수를 실행합니다. 이렇게 하면 number가 변경되지 않는 한 불필요한 재계산을 피할 수 있습니다.

주의사항

1. useMemo는 성능 최적화 도구입니다.

모든 경우에 useMemo를 사용하는 것이 아니라, 컴포넌트가 자주 렌더링되어 성능 문제가 발생할 때만 사용해야 합니다. 지나치게 사용하면 오히려 성능이 저하될 수 있습니다.

2. 의존성 배열에 주의

useMemo의 두 번째 인자인 의존성 배열을 잘못 설정하면, 메모이제이션이 제대로 동작하지 않을 수 있습니다. 의존성 배열은 메모이제이션된 값이 변경되어야 하는 조건을 명확히 정의합니다.

3. useMemo와 useEffect의 차이

useEffect는 사이드 이펙트(부수 효과)를 처리하기 위해 사용되고, useMemo는 계산된 값을 메모이제이션합니다. 두 훅을 혼동하지 않도록 주의해야 합니다.

더 알아보기

• useCallback: 함수 메모이제이션 훅으로, 함수를 메모이제이션하여 불필요한 함수 재생성을 방지합니다.
• useEffect: 컴포넌트가 렌더링된 후 사이드 이펙트를 수행하는 훅으로, useMemo와는 다른 용도로 사용됩니다.
• React 성능 최적화: React 애플리케이션의 전반적인 성능을 최적화하는 다양한 기법들.

내용 요약

useMemo는 특정 값이나 계산을 메모이제이션하여 성능을 최적화하는 React 훅입니다. 이를 통해 불필요한 계산을 방지하고, 컴포넌트가 자주 렌더링되는 상황에서 유용합니다. 하지만, 모든 경우에 남용하지 않도록 주의해야 하며, 올바른 의존성 배열 설정이 중요합니다.